<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示和隐藏指令</title>
    <script src="../js/vue.js"></script>
    <style>
        #box{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--
        vue 实现元素的显示和隐藏
        v-if     boolean    true    显示    false  隐藏       通过添加和删除节点的方式实现元素的显示和隐藏
        v-show   boolean    true    显示    false  隐藏       通过添加标签的css样式实现元素的显示和隐藏操作  display: none;

        元素的显示和隐藏经常的改变   推荐使用  v-show
-->

<div id="app">

    <div id="box" v-show="bln">

    </div>

    <button @click="hideShow">隐藏/显示</button>
</div>



<script>

    // document.getElementById("btn1").onclick = function () {
    //     document.getElementById("box").style.display = "none"
    // }
    //
    // document.getElementById("btn2").onclick = function () {
    //     document.getElementById("box").style.display = "block"
    // }

    const vm = new Vue({
        el:'#app',
        data:{
            bln: true
        },
        methods:{
            hide(){
                this.bln = false
            },
            shw(){
                this.bln = true
            },
            hideShow(){
                this.bln = !this.bln
            }
        }
    })
</script>

</body>
</html>
